<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="header">
          <el-button type="primary" @click="insertTypeDialog=true" class="add-button">新增</el-button>
        </div>
        <el-card class="box-card">
          <el-table :data="selectType" style="width: 100%" stripe border>
            <el-table-column prop="foodTypeName" label="商品类型名称" width="180" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 3, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      v-model="insertTypeDialog"
      title="新增菜品类型"
      width="500px"
      :before-close="handleClose"
      class="custom-dialog"
    >
      <el-input v-model="foodTypeName" placeholder="请输入菜品类型名称" class="input-field"></el-input>
      <template #footer>
        <div class="dialog-footer"  style="position: relative;left: -900px;">
          <el-button @click="insertTypeDialog = false">取消</el-button>
          <el-button type="primary" @click="insertType">新增</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'FoodTypeManagement',
  data() {
    return {
      insertTypeDialog: false,
      selectType: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      foodTypeName: ""
    };
  },
  methods: {
    insertType() {
      axios.get("/meals/foodType/createFoodType", {
        params: { foodTypeName: this.foodTypeName }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.insertTypeDialog = false;
          this.selectTypes();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除该类型吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.$message.success('删除成功');
        // 执行删除操作的逻辑
        const foodTypeId = row.foodTypeId;
        axios.delete("/meals/foodType/deleteFoodType", {
        params: {
          foodTypeId: foodTypeId
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.selectTypes();
        } else {
          this.$message.error(res.data.msg);
        }
      });
      })
      .catch(() => {
        this.$message.info('已取消删除');
      });
      
    
    },
    selectTypes() {
      axios.get("/meals/foodType/searchFoodTypeList", {
        params: {
          storeId: JSON.parse(localStorage.getItem("storeId")),
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then((resp) => {
        this.selectType = resp.data.data.list;
        this.total = resp.data.data.total;
        this.pageNum = resp.data.data.pageNum;
        this.pageSize = resp.data.data.pageSize;
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.selectTypes();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectTypes();
    },
    handleClose(done) {
      this.$confirm('确定关闭此对话框吗？')
        .then(_ => {
          done();
          this.foodTypeName = "";
        }).catch(_ => {
          done();
        });
    }
  },
  created() {
    this.selectTypes();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.add-button {
  height: 40px;
  font-size: 14px;
  padding: 10px 20px;
}

.custom-dialog {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.input-field {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>